<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="我的推荐列表">
	</u-navbar>
	<empty :config="{text:'您还没有推荐名单'}" v-if="data.resultTotal==0&&data.list.length==0" />
	<view v-else class="padding-30rpx" style="background-color: #F7F7F7">
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
      <view style="background-color: #FFFFFF;border-radius: 8px;">
        <view class="padding-30rpx white-bg" style="color:#666666;padding: 15px 15px 0 15px; border-radius: 8px" v-for="(item,index) in data['list']">
          <view class="flex-jc-s-b" style="padding-bottom: 15px" :style="index == data['list'].length-1?'':{'border-bottom':'1px solid rgba(0,0,0,0.1)'}">
            <view class="flex-column" style="align-items: flex-start;">
              <text style="font-weight: bold;font-size: 15px;color: #333333;">{{item.name}}</text>
              <text style="margin-top: 3px;font-size: 13px;">{{item.mobile}}</text>
            </view>
            <view>
              <text style="font-size: 13px;white-space: nowrap;">{{item.registerTime}}</text>
            </view>
          </view>
        </view>
      </view>
		</scroll-view>
	</view>
</template>

<script setup>
	import empty from '@/pages/components/empty.vue'
	import { onMounted, reactive } from "vue";
  import {recommendPagingApi} from './const.js'
	const data = reactive({
		list: [],
		request: {
      pageDomain: {
        "pageNum": "1", //页数
        "pageSize": "5", //每页数量
        "orderByColumn": "",
        "isAsc": "",
        "reasonable": ""
      }
		},
		resultTotal: 9999
	})
	onMounted(() => {
		paging()
	})
	const paging = () => {
    recommendPagingApi(data.request).then((res) => {
			data.list.push(...res.rows)
			data.resultTotal = res.total || 0
		}).catch(() => {
			data.resultTotal = 0
		})
	}

	function lower(e) {
    if ((data.resultTotal <= data.list.length) || data.resultTotal === 0) { return }
    data.request.pageDomain.pageNum++
    paging()
	}
</script>

<style>
	.scroll-Y {
		height: calc(100vh - 74px);
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border: 1px solid red;
		font-size: 36rpx;
	}
</style>
